<template>
	<div>
		<div>
			<el-button @click="addDialog = true">添加评分</el-button>
		</div>
		<el-table :data="tableData.records">
			<el-table-column prop="moveVo.name" label="影视名称" width="120" />
			<el-table-column prop="score" label="评分" width="120" />
			<el-table-column prop="userId" label="用户id" width="120" />
			<el-table-column label="操作">
				<template #default="scope">
					<el-button size="small" @click="openEdit(scope.row.id)">修改</el-button>
					<el-button size="small" @click="deleted(scope.row.id)" type="danger">删除</el-button>
				</template>
			</el-table-column>
		</el-table>
		<el-pagination
			style="margin-bottom: 20px"
			background
			layout="prev, pager, next"
			:page-count="tableData.pages"
			v-model:current-page="tableData.page"
			@update:current-page="loadData"
		/>

		<el-dialog
			:close-on-click-modal="false"
			:close-on-press-escape="false"
			v-model="editDialog"
			title="修改"
			width="30%"
			:before-close="resetForm"
		>
			<el-form :model="formData" label-width="120px">
				<el-form-item label="影视剧">
					<el-select v-model="formData.moveId" placeholder="Select" disabled>
						<el-option v-for="item in moveList" :key="item.value" :label="item.label" :value="item.value" />
					</el-select>
				</el-form-item>
				<el-form-item label="评分">
					<el-input v-model="formData.score" type="number" />
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="edit">更新</el-button>
					<el-button @click="resetForm">取消</el-button>
				</el-form-item>
			</el-form>
		</el-dialog>

		<el-dialog
			:close-on-click-modal="false"
			:close-on-press-escape="false"
			v-model="addDialog"
			title="新增评分"
			width="30%"
			:before-close="resetForm"
		>
			<el-form :model="formData" label-width="120px">
				<el-form-item label="影视剧">
					<el-select v-model="formData.moveId" placeholder="Select">
						<el-option v-for="item in moveList" :key="item.value" :label="item.label" :value="item.value" />
					</el-select>
				</el-form-item>
				<el-form-item label="评分">
					<el-input v-model="formData.score" type="number" />
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="add">新增</el-button>
					<el-button @click="resetForm">取消</el-button>
				</el-form-item>
			</el-form>
		</el-dialog>
	</div>
</template>

<script setup>
import { ElMessage, ElMessageBox } from "element-plus";
import { onMounted, reactive, ref } from "vue";
import { useUserStore } from "@/stores/userStores";
import { deletedScore, getScoreById, getScorePage, saveScore, updateScore } from "@/api/score";
import { getListMove } from "@/api/move";

const tableData = reactive({
	records: [],
	pages: 0,
	page: 1,
	size: 10,
});
const formData = ref({});
const moveList = ref([]);

const userStore = useUserStore();
const token = userStore.token;
const editDialog = ref(false);
const addDialog = ref(false);

const openEdit = async (id) => {
	const result = await getScoreById(id);
	if (result.success) {
		formData.value.id = result.data.id;
		formData.value.userID = result.data.userID;
		formData.value.moveId = result.data.moveId;
		formData.value.score = result.data.score;
		editDialog.value = true;
	} else {
		ElMessage.error(result.msg);
	}
};
const edit = async () => {
	const res = await updateScore(formData.value);
	if (res.success) {
		ElMessage.success("修改成功");
	} else {
		ElMessage.error(res.msg);
	}
	editDialog.value = false;
	resetForm();
	loadData();
};

const add = async () => {
	const res = await saveScore(formData.value);
	if (res.success) {
		ElMessage.success("添加成功");
	} else {
		ElMessage.error(res.msg);
	}
	addDialog.value = false;
	resetForm();
	loadData();
};
const deleted = async (id) => {
	ElMessageBox.confirm("确认要删除该评分?", "Warning", {
		confirmButtonText: "确认",
		cancelButtonText: "取消",
		type: "warning",
	}).then(async () => {
		const res = await deletedScore(id);
		if (res.success) {
			ElMessage.success("删除完成");
		} else {
			ElMessage.error(res.msg);
		}
		loadData();
	});
};
/**
 * 表单重置
 */
const resetForm = () => {
	if (addDialog.value) {
		addDialog.value = false;
	}
	if (editDialog.value) {
		editDialog.value = false;
	}
	formData.value = {};
};

const loadData = async () => {
	const res = await getScorePage({
		page: tableData.page,
		size: tableData.size,
	});
	if (res.success) {
		tableData.records = res.data.list;
		tableData.page = res.data.pageNum;
		tableData.pages = res.data.pages;
	}
};

onMounted(() => {
	loadData();
	getListMove().then((res) => {
		moveList.value = res.data.map((res) => {
			return {
				label: res.name,
				value: res.id,
			};
		});
	});
});
</script>

<style scoped></style>
